<template>
  <page-card title="节假日管理">
    <div>
      <Calendar @panelChange="panelChange">
        <ul slot="dateCellRender"
            @panelChange="panelChange"
            slot-scope="value"
            class="events">

          <div v-for="(item,index) in getListData(value)"
               :key="index">
            <Popover placement="topRight"
                     v-if="change==0"
                     destroyTooltipOnHide
                     trigger="click">
              <template slot="content">
                <p v-if="item.type">确认取消该天节假日？</p>
                <a-form-item label="描述"
                             required
                             :label-col="{ span: 5 }"
                             :wrapper-col="{ span: 19 }"
                             v-if="!item.type">
                  <a-input allowClear
                           placeholder="请输入描述"
                           maxLength="12"
                           v-model.trim="title" />
                </a-form-item>
                <div style="text-align:center;">
                  <a-button size="small"
                            @click="save($event,item)"
                            type="primary">
                    {{ item.type?'确认':'保存' }}
                  </a-button>
                </div>
              </template>

              <div :class="[item.type ? 's-holidays' : 'c-holidays']">
                {{ item.title }}
              </div>
            </Popover>
          </div>

        </ul>

      </Calendar>
    </div>
  </page-card>
</template>

<script>
import { Calendar, Popover } from 'ant-design-vue'
import { getweekDayList, addOrCutHoliday } from '../../api/holidays/index'
export default {
  data () {
    return {
      visible: false,
      change: 0,
      title: '',
      date: '',
      data: []
    }
  },
  components: { Calendar, Popover },
  created () {
    this.load()
  },
  methods: {
    panelChange (date, mode) {
      this.change = 1
      this.date = date.format('YYYY-MM-DD')
      this.load()
    },
    save (el, item) {
      const _this = this

      if (!this.title && !item.type) {
        this.message.warning('请输入描述！')
        return
      }
      addOrCutHoliday({ title: this.title, day: item.day }).then((response) => {
        _this.load()
        _this.title = ''
        el.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display = 'none'
        this.message.info('操作成功')
      })
    },
    load () {
      getweekDayList({ paramDate: this.date }).then((response) => {
        this.data = response
        this.change = 0
      })
    },
    getListData (value) {
      const _this = this
      let time = value.format('YYYY-MM-DD')
      let timeData = []
      let tag = false
      for (let i = 0; i < _this.data.length; i++) {
        if (time == _this.data[i].day) {
          _this.data[i].type = 1
          timeData.push(_this.data[i])
          tag = true
          break
        }
      }
      if (!tag) {
        timeData.push({
          title: '',
          day: time
        })
      }
      return timeData
    }
  }
}
</script>
<style lang="less" scoped>
@import url("../../styles/index.less");

/deep/.ant-radio-group {
  margin-left: 16px;
  display: none;
}
.c-holidays {
  text-align: center;
  height: 80px;
  width: 190px;
  display: table-cell;
  vertical-align: middle;
  background-color: #fff;
}
.s-holidays {
  text-align: center;
  height: 80px;
  width: 190px;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  background-color: @primary-color;
}
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: var(--font-size-12);
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
